<template>
  <div>
    <!-- <el-dialog
      ref="refDlg"
      title="新增"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800"
      @close="handleBack"
    > -->
    <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style="color: #3DC094;" @click.native="goBack">列表页</el-breadcrumb-item>
        <el-breadcrumb-item>新增</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">确定</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <div>
      <!-- 导入时填写验收任务号、责任归属、问题分类、问题类型字段 -->
      <el-form ref="refForm" :rules="formRules" :model="formData" size="mini" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="验收任务号:" size="mini" prop="acceptCode">
              <el-input v-model="formData.acceptCode" size="mini" placeholder="请输入验收任务号" />

              <!-- <input-with-dialog
                v-model="acceptArr"
                :props="{label:`acceptTaskCode`,value:'acceptTaskCode'}"
                :config="acceptConfig"
                @change="acceptChange"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="责任归属:" size="mini" prop="accountability">
              <el-input v-model="formData.accountability" size="mini" placeholder="请输入责任归属" />

              <!-- <c-remote-select
                style="width:100%"
                :disabled="!acceptType"
                placeholder="请先选择验收任务号"
                url="/api/v1/configAcceptDuty/page"
                method="POST"
                :value="formData.accountability"
                value-name="belongDuty"
                label-name="belongDuty"
                :filters-raw="[
                  { key: 'enable', value: '1', operator: '=' },
                  { key: 'acceptType', value: acceptType, operator: '=' }
                ]"
                @input="data=>formData.accountability=data"
              /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题分类:" size="mini" prop="problemCategory">
              <!-- <c-dict-select
                v-model="formData.problemCategory"
                dict-type-code="PROBLEM_CATEGORY"
                placeholder="请选择问题分类"
              /> -->
              <el-input v-model="formData.problemCategory" size="mini" placeholder="请输入问题分类" />

              <!-- <input-with-dialog
                v-model="problemCategoryArr"
                :disabled="!acceptType||!formData.accountability"
                :props="{label:`problemClass`,value:'problemClass'}"
                :config="{
                  title: '问题分类',
                  interfacePath: `/slm-admin/api/v1/configAcceptProblem/page`,
                  setting: [
                    {
                      prop: 'problemClass',
                      title: '问题分类'
                    },
                    {
                      prop: 'acceptTypeName',
                      title: '验收类型'
                    }
                  ],
                  filtersRaw: [
                    { id: 'belongDuty', property: 'belongDuty', operator: '=', value:formData.accountability},
                    { id: 'acceptType', property: 'acceptType', operator: '=', value: acceptType},
                    { id: 'enable', property: 'enable', operator: '=', value:'1'}
                  ]

                }"
                @change="problemCategoryChange"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题类型:" size="mini" prop="problemType">
              <el-input v-model="formData.problemType" size="mini" placeholder="请输入问题类型" />
              <!-- <c-remote-select
                placeholder="请选择问题类型"
                url="/api/v1/configAcceptProblem/page"
                method="POST"
                :value="formData.problemType"
                value-name="problemClass"
                label-name="problemClass"
                :filters-raw="[
                  { key: 'enable', value: '1', operator: '=' }
                ]"
                @input="data=>formData.problemType=data"
              /> -->
              <!-- <input-with-dialog
                v-model="formData.problemType"
                :props="{label:`problemClass`,value:'problemClass'}"
                :config="problemTypeConfig"
                @change="problemTypeChange"
              /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="上传图片:" size="mini" prop="picList">

              <!-- <span style="color:#E6A23C">图片名称为问题描述</span> -->
              <file-list ref="fileRef" />
              <!-- <c-file-table-box
                v-model="formData.picList"
                :table-height="250"
                belong-model="SELF_DESIGN"
              /> -->
              <!-- <import-img
                :photo-list="formData.picList"
              /> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import fileList from './FileExportBatch.vue'
// import { getDictByPatchType } from '@/api/dataDict'
import { savePicBatch } from '@/api/basicData'
// import importImg from '@/components/importImg'
import BackPageMixin from '@/mixins/backPage'

// import { getUserInfo } from '@/utils/auth'
// import fileUploader from '@/components/importFile'
// import { postConfigAttachmentTemplate, changeFileList } from '@/api/proConfig'
// import { getShopAttachment } from '@/api/decorate'
export default {
  name: 'EditForm',
  components: { fileList },
  mixins: [BackPageMixin],

  props: {
  },
  data() {
    return {
      tableSelected: [],
      tableConfig: {
        interfacePath: ``,
        buttonGroupCode: 'fileBatch',
        hideSearchBar: true,
        tabIndex: 1,
        flagFlag: false,
        // 表格字段动态配置
        setting: [
          {
            prop: 'name',
            label: '附件名称',
            minWidth: '150'
          },
          {
            prop: 'createTime',
            label: '上传时间',
            width: '200'
          }
        ],
        btnList: []
      },
      acceptType: '',
      problemCategoryArr: [],
      acceptArr: [],
      saveLoading: false,
      acceptDutyConfig: {
        title: '责任归属',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configAcceptDuty/page`,
        setting: [
          {
            prop: 'belongDuty',
            title: '责任归属'
          },
          {
            prop: 'acceptTypeName',
            title: '验收类型'
          }
        ],
        filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      },
      acceptConfig: {
        title: '验收任务',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopAccept/selectPage`,
        apiHeader: {
          'Permission-perCode': 'checkhard',
          'Permission-App': 'slm'
        },
        setting: [
          {
            prop: 'acceptTaskCode',
            title: '验收任务号'
          },
          {
            prop: 'shopName',
            title: '门店名称'
          },
          {
            prop: 'decorationTaskCode',
            title: '装修任务号'
          }
        ]
        // filtersRaw: [{ 'id': 'enable', 'property': 'enable', 'operator': '=', 'value': '1' }]
      },
      problemTypeConfig: {
        title: '问题类型',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configAcceptProblem/page`,
        setting: [
          {
            prop: 'problemClass',
            title: '问题类型'
          },
          {
            prop: 'acceptTypeName',
            title: '验收类型'
          }
        ],
        filtersRaw: [
          // { key: 'acceptType', value: 'HARD', operator: '=' },
          { key: 'enable', value: '1', operator: '=' }
        ]
      },
      formData: {
        acceptCode: '',
        accountability: '',
        problemCategory: '',
        problemType: '',
        problemDescribe: '',
        picList: [] // 上传图片列表
      },
      formRules: {
        picList: [{ required: true, message: '请上传' }],
        acceptCode: [{ required: false, message: '请输入', trigger: 'change' }],
        accountability: [{ required: false, message: '请选择' }],
        problemCategory: [{ required: false, message: '请选择', trigger: 'change' }],
        problemType: [{ required: false, message: '请填写' }]

      }
    }
  },
  computed: {
  },
  created() {},
  methods: {
    selectionChangeHandle(data) {
      this.tableSelected = data
    },
    problemCategoryChange(row) {
      this.$set(this.formData, 'problemCategory', row[0].problemClass)
      // this.formData.problemCategory = row[0].problemClass
      this.formData.problemType = row[0].problemType
    },
    changeType(data) {
      // this.$set(this.formData, 'problemType', row[0].id)
      this.formData.problemType = data
    },
    // 选择责任归属
    acceptDutyChange(row) {
      this.formData.accountability = row[0].belongDuty
    },
    problemTypeChange(row) {
      this.formData.problemType = row[0].problemClass
    },
    acceptChange(row) {
      this.acceptType = row[0].acceptType
      this.$set(this.formData, 'acceptCode', row[0].acceptTaskCode)
    },
    // 取消
    handleBack() {
      this.$emit('goBack', false)
    },
    // 提交
    submitForm() {
      this.formData.picList = this.$refs.fileRef.getFileList()
      console.log(this.formData.picList)
      // return
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          const submitList = this.formData.picList.map(v => {
            const keyIndex = v.attachmentName.lastIndexOf('.')
            return {
              url: v.attachmentUrl,
              problemDescribe: v.attachmentName.substring(0, keyIndex > -1 ? keyIndex : v.attachmentName.length),
              acceptCode: this.formData.acceptCode,
              accountability: this.formData.accountability,
              problemCategory: this.formData.problemCategory,
              problemType: this.formData.problemType
            }
          })
          this.saveLoading = true
          savePicBatch(submitList).then(res => {
            if (res.success) {
              this.saveLoading = false
              this.$message.success('操作成功')
              this.goBack()
              this.$emit('success', res.data)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
